<template>
    <view>
        <view class="margin-tb-base margin-lr-2xl flex align-center justify-center" style="padding: 80rpx 0">
            <image class="size-img-base" :src="settingStore.setting.LOGO" mode="scaleToFill" />
        </view>

        <view class="margin-tb-base margin-lr-xl">
            <view v-if="loginType == 'weixin'">
                <template v-if="!isArrge">
                    <button class="login-btn round bg-main" @click="login">
                        <text class="text-lg">快捷一键登录</text>
                    </button>
                </template>
                <template v-else>
                    <button class="login-btn round bg-main" @getphonenumber="login" open-type="getPhoneNumber">
                        <text class="text-lg">快捷一键登录</text>
                    </button>
                </template>
            </view>

            <view v-if="loginType == 'acount'">
                <view class="margin-bottom-lg">
                    <aconutInput v-model="account" />
                </view>
                <view>
                    <passwordInput v-model="password" />
                </view>
                <view class="margin-top-2xl">
                    <button class="login-btn round bg-main" @click="login">
                        <text class="text-lg">登陆</text>
                    </button>
                </view>
            </view>

            <view v-if="loginType == 'code'">
                <view class="margin-bottom-lg">
                    <aconutInput v-model="mobile" />
                </view>
                <view>
                    <codeInput v-model="code" :mobile="mobile" type="register" />
                </view>
                <view class="margin-top-2xl">
                    <button class="bg-main round" @click="login">
                        <text class="text-lg">登陆</text>
                    </button>
                </view>
            </view>
            <!-- 协议 -->
            <userAgreement v-model="isArrge" />
        </view>

        <view class="fixed padding-bottom-lg">
            <view class="margin-lr-2xl">
                <view class="flex align-center">
                    <view class="line-h1 bg-grey" style="width: calc(50% - 120rpx); height: 1px"></view>
                    <view class="text-center" style="width: 240rpx">其他登录方式</view>
                    <view class="line-h1 bg-grey" style="width: calc(50% - 120rpx); height: 1px"></view>
                </view>
            </view>

            <view class="margin-tb-2xl margin-lr-base flex align-center justify-center" style="gap: 40rpx">
                <view
                    v-if="loginType !== 'acount'"
                    @click="swtichLoginType('acount')"
                    class="login-way bg-main round flex align-center justify-center"
                >
                    <text class="icon-shouji text-white"></text>
                </view>
                <view v-if="loginType !== 'code'" @click="swtichLoginType('code')" class="login-way bg-main round flex align-center justify-center">
                    <text class="icon-hexiaoma text-white"></text>
                </view>
                <view
                    v-if="loginType !== 'weixin'"
                    @click="swtichLoginType('weixin')"
                    class="login-way bg-main round flex align-center justify-center"
                >
                    <text class="icon-weixin1 text-white"></text>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useTask } from "@/utils/message";
import { useSettingStore } from "@/store/module/setting";
import { useMemberStore } from "@/store/module/member";
import userAgreement from "@/components/user/user-agreement.vue";
import aconutInput from "@/components/input/acount-input.vue";
import passwordInput from "@/components/input/password-input.vue";
import codeInput from "@/components/input/code-input.vue";

const settingStore = useSettingStore();
const memberStore = useMemberStore();
const isArrge = ref<boolean>(false);
const loginType = ref<"weixin" | "code" | "acount">("weixin");
const account = ref<string>(""); // 账号
const password = ref<string>(""); // 密码
const mobile = ref<string>(""); // 手机号
const code = ref<string>(""); // 验证码

const swtichLoginType = (type: "weixin" | "code" | "acount") => {
    loginType.value = type;
};

const login = (getNumberResult?: any) => {
    if (!isArrge.value) {
        useTask("请先勾选同意隐私政策和服务协议");
        return;
    }

    switch (loginType.value) {
        case "weixin":
            memberStore.wxLogin(getNumberResult);
            break;
        case "acount":
            memberStore.accountLogin({
                account: account.value,
                password: password.value
            });
            break;
        case "code":
            memberStore.codeLogin({
                mobile: mobile.value,
                code: code.value
            });
            break;
        default:
            break;
    }
};
</script>

<style lang="scss" scoped>
.fixed {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;

    .login-way {
        width: 100rpx;
        height: 100rpx;
    }
}
</style>
